<template>
  <div class="approve-return-form">
    <form @submit.prevent="submitForm">
      <!-- 退货单信息 -->
      <div class="form-section">
        <h3>退货单信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>退货单编号</label>
            <span>{{ returnOrder.returnCode }}</span>
          </div>
          <div class="info-item">
            <label>原订单编号</label>
            <span>{{ returnOrder.originalOrderCode }}</span>
          </div>
          <div class="info-item">
            <label>客户姓名</label>
            <span>{{ returnOrder.customerName }}</span>
          </div>
          <div class="info-item">
            <label>退货金额</label>
            <span>¥{{ (returnOrder.returnAmount || 0).toFixed(2) }}</span>
          </div>
        </div>
      </div>

      <!-- 审核结果 -->
      <div class="form-section">
        <h3>审核结果</h3>
        <div class="form-grid">
          <div class="form-group">
            <label>审核决定 *</label>
            <div class="radio-group">
              <label class="radio-item">
                <input v-model="form.approvalResult" type="radio" value="approve" required>
                <span class="radio-label approve">通过</span>
              </label>
              <label class="radio-item">
                <input v-model="form.approvalResult" type="radio" value="reject" required>
                <span class="radio-label reject">拒绝</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核意见 -->
      <div class="form-section">
        <h3>审核意见</h3>
        <div class="form-grid">
          <div class="form-group">
            <label>审核意见 *</label>
            <textarea v-model="form.approvalComment" placeholder="请输入审核意见" required></textarea>
          </div>
        </div>
      </div>

      <!-- 退款信息 -->
      <div v-if="form.approvalResult === 'approve'" class="form-section">
        <h3>退款信息</h3>
        <div class="form-grid">
          <div class="form-group">
            <label>退款金额</label>
            <input v-model.number="form.refundAmount" type="number" step="0.01" :max="returnOrder.refundAmount" required>
            <span class="help-text">最大退款金额: ¥{{ (returnOrder.refundAmount || 0).toFixed(2) }}</span>
          </div>
          <div class="form-group">
            <label>积分退还</label>
            <input v-model.number="form.pointsRefund" type="number" :max="returnOrder.pointsRefund" required>
            <span class="help-text">最大积分退还: {{ returnOrder.pointsRefund }}</span>
          </div>
          <div class="form-group">
            <label>退款方式</label>
            <select v-model="form.refundMethod" required>
              <option value="">请选择退款方式</option>
              <option value="原路退回">原路退回</option>
              <option value="银行转账">银行转账</option>
              <option value="现金退款">现金退款</option>
              <option value="预付款余额">预付款余额</option>
            </select>
          </div>
          <div class="form-group">
            <label>退款账户</label>
            <input v-model="form.refundAccount" type="text" placeholder="请输入退款账户信息">
          </div>
        </div>
      </div>

      <!-- 处理信息 -->
      <div v-if="form.approvalResult === 'approve'" class="form-section">
        <h3>处理信息</h3>
        <div class="form-grid">
          <div class="form-group">
            <label>处理方式</label>
            <select v-model="form.processMethod" required>
              <option value="">请选择处理方式</option>
              <option value="退货入库">退货入库</option>
              <option value="销毁处理">销毁处理</option>
              <option value="维修后重新销售">维修后重新销售</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div class="form-group">
            <label>处理说明</label>
            <textarea v-model="form.processComment" placeholder="请输入处理说明"></textarea>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <button type="button" class="btn-cancel" @click="$emit('close')">
          取消
        </button>
        <button type="submit" class="btn-submit" :disabled="!isFormValid">
          <i class="fas fa-check"></i>
          提交审核
        </button>
      </div>
    </form>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'ApproveReturnForm',
  props: {
    returnOrder: {
      type: Object,
      required: true
    }
  },
  emits: ['close', 'success'],
  setup(props, { emit }) {
    // 表单数据
    const form = ref({
      approvalResult: '',
      approvalComment: '',
      refundAmount: props.returnOrder.refundAmount,
      pointsRefund: props.returnOrder.pointsRefund,
      refundMethod: '',
      refundAccount: '',
      processMethod: '',
      processComment: ''
    })
    
    // 表单验证
    const isFormValid = computed(() => {
      if (!form.value.approvalResult || !form.value.approvalComment) {
        return false
      }
      
      if (form.value.approvalResult === 'approve') {
        return form.value.refundAmount > 0 && 
               form.value.pointsRefund >= 0 && 
               form.value.refundMethod &&
               form.value.processMethod
      }
      
      return true
    })
    
    // 提交表单
    const submitForm = async () => {
      try {
        const approvalData = {
          returnOrderId: props.returnOrder.id,
          approvalResult: form.value.approvalResult,
          approvalComment: form.value.approvalComment,
          approverId: 1, // 当前用户ID
          approverName: '管理员', // 当前用户名
          approvedAt: new Date().toISOString(),
          ...(form.value.approvalResult === 'approve' ? {
            refundAmount: form.value.refundAmount,
            pointsRefund: form.value.pointsRefund,
            refundMethod: form.value.refundMethod,
            refundAccount: form.value.refundAccount,
            processMethod: form.value.processMethod,
            processComment: form.value.processComment
          } : {})
        }
        
        // 这里应该调用后端API
        // const response = await fetch(`/api/retail/returns/${props.returnOrder.id}/approve`, {
        //   method: 'POST',
        //   headers: { 'Content-Type': 'application/json' },
        //   body: JSON.stringify(approvalData)
        // })
        
        console.log('审核退货单:', approvalData)
        
        emit('success')
      } catch (error) {
        console.error('审核退货单失败:', error)
      }
    }
    
    return {
      form,
      isFormValid,
      submitForm
    }
  }
}
</script>

<style scoped>
.approve-return-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-section {
  background: #f8fafc;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.form-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  font-weight: 500;
  color: #4a5568;
  font-size: 0.875rem;
}

.info-item span {
  color: #2d3748;
  font-size: 0.875rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: #4a5568;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #f093fb;
  box-shadow: 0 0 0 3px rgba(240, 147, 251, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.help-text {
  font-size: 0.75rem;
  color: #718096;
  margin-top: 4px;
}

.radio-group {
  display: flex;
  gap: 16px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.radio-label {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.radio-label.approve {
  background: #c6f6d5;
  color: #22543d;
}

.radio-label.reject {
  background: #fed7d7;
  color: #742a2a;
}

.radio-item input[type="radio"]:checked + .radio-label.approve {
  background: #48bb78;
  color: white;
}

.radio-item input[type="radio"]:checked + .radio-label.reject {
  background: #f56565;
  color: white;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 0;
}

.btn-cancel,
.btn-submit {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel {
  background: #e2e8f0;
  color: #4a5568;
}

.btn-submit {
  background: #f093fb;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-cancel:hover,
.btn-submit:hover:not(:disabled) {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .radio-group {
    flex-direction: column;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
</style>
